<template>
  <div id="app" class="container">
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <MyHeader></MyHeader>

    <router-link to="/news">Go to News</router-link>
    <router-link to="/login">Go to Login</router-link>
    <router-link :to="{ name: 'user', params: { id: 1 } }">Go to User</router-link>
    <hr>
    <router-view></router-view>

    <hr>
    <button @click="increment()">Increment count</button>
    <button @click="loadLogs()">Load Logs async</button>
    <button @click="fetchLogs()">Load Logs async by promise</button>
    <p>{{$store.state.count}}</p>
    <p>{{$store.state.logsCount}}</p>
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>id</th>
          <th>transcationId</th>
          <th>sessionId</th>
          <th>opType</th>
          <th>instruction</th>
          <th>createdOn</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="log in $store.state.logs">
          <td>{{log.id}}</td>
          <td>{{log.transcationId}}</td>
          <td>{{log.sessionId}}</td>
          <td>{{log.opType}}</td>
          <td>{{log.instruction}}</td>
          <td>{{log.createdOn}}</td>
        </tr>
      </tbody>
    </table>
    <Pagination :total="$store.state.logsCount" :pageSize="10"></Pagination>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import MyHeader from './components/Header.vue'
import Pagination from './components/Pagination.vue'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created() {
    this.loadLogs();
  },
  computed: {
  },
  methods: {
    // ...mapActions({
    //   loadLogs: 'loadLogs' // 映射 this.add() 为 this.$store.dispatch('increment')
    // })
    loadLogs() {
      this.$store.dispatch('loadLogs', { page: 1})
    },
    fetchLogs() {
      // 首先，你需要明白 store.dispatch 可以处理被触发的action的回调函数返回的Promise，并且store.dispatch仍旧返回Promise：
      this.$store.dispatch('fetchLogs').then(data => {
        console.log(data);
      })
    }
  },
  components: {
    MyHeader, Pagination
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}


a {
  color: #42b983;
}
</style>
